<template>
	<view>
		<z-paging ref="paging" :default-page-size="params.pageSize" v-model="list" @query="getList">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar title="经纪人审核" :border="false" backgroundColor="#ffffff"
					@clickLeft="goBack">
					<template v-slot:left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
				</uni-nav-bar>
				<!-- <view class="menu-list flex item-center justify-center">
					<template v-for="item in menu" :key="item.id">
						<view class="menu-item" :class="{'active':menuId == item.id}" @click="selMenu(item)">
							{{item.name}}
							<view class="sel-line" v-if="menuId == item.id"></view>
						</view>
					</template>
				</view> -->
				<view v-if="!maxInviteAgentCount" class="member-tip">经纪人上限{{ maxInviteAgentCount }}人</view>
				<view class="oper-box flex item-center justify-between">
					<view v-for="(oper,i) in operMenu" :key="i" class="oper-item" :class="{'active':oper.id == params.auditState}" @click="openPer(oper,i)">
						<uni-badge v-if="i===1" class="uni-badge-left-margin" :text="waitAuditCount" absolute="rightTop" :offset="[-5, 5]" size="small">
							<view>{{oper.title}}</view>
							<view class="active-line" v-if="oper.id == params.auditState"></view>
						</uni-badge>
						<template v-else>
							<view>{{oper.title}}</view>
							<view class="active-line" v-if="oper.id == params.auditState"></view>
						</template>
					</view>
				</view>
			</template>
			<view v-for="item in list" :key="item.id" class="merchant-item">
				<view class="flex justify-between item-center">
					<view class="flex item-center">
						<image :src="item.avatar" mode="" class="img-avatar mr-8"></image>
						<view class="flex flex-col justify-between">
							<view class="nick-name">{{ item.nickName }}</view>
							<view class="gray fs-12">申请时间：{{ item.createTime }}</view>
						</view>
					</view>
					<view :style="{'color':getStatus(item.auditState,'color')}">{{getStatus(item.auditState,'text')}}</view>
				</view>
				<view class="my-16 detail">
					<view class="mb-8">姓名：{{ item.username }}</view>
					<view class="mb-8">手机号：{{ item.mobile }}</view>
					<view class="mb-8">分组：{{ item.groupName }}</view>
					<view>申请理由：{{ item.applyReason }}</view>
					<view v-if="item.refuseReason" class="mt-8">原因：{{ item.refuseReason }}</view>
				</view>
				<view v-if="item.auditState === 1" class="refuse-Reason flex justify-end">
					<view class="apply-btn cancel" @click="refusePop(item)">拒绝</view>
					<view class="apply-btn ml-12" @click="pass(item)">通过</view>
				</view>
			</view>
		</z-paging>
		<contentPop ref="contentPopRef" @onSubmit="onSubmit"></contentPop>
	</view>
</template>

<script setup>
	import { agentBindApplyPage, agentBindApplyAudit, agentUnBindApplyPage, agentUnBindApplyAudit } from '@/pagesD/api/agent.js'
	import { getActiveLimitApi } from '@/api/business.js'
	import contentPop from '../merchantList/components/contentPop.vue'
	import { ref, getCurrentInstance, onBeforeUnmount } from "vue";
	import {onLoad} from '@dcloudio/uni-app'
	let getOpenerEventChannel = ref(null)
	onLoad(() => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
	})
  import {
    useUserStore
  } from '@/stores/modules/user.js'
  const userStore = useUserStore()
	const menuId = ref(1)
  const menu = ref([{
    name: '入驻申请',
    id: 1,
  }])
  if (userStore.userInfo.agentLevel === 1) {
    menu.value = [...menu.value, {
      name: '解绑申请',
      id: 2,
    }]
  }
	const operMenu = ref([{
			title: '全部',
			id:'',
			color:'',
			text:''
		},
		{
			title: '待审核',
			id:1,
			color:'rgba(252, 181, 19, 1)',
			text:'待审核'
		},
		{
			title: '已通过',
			id:2,
			color:'rgba(22, 190, 98, 1)',
			text:'已通过'
		},
		{
			title: '未通过',
			id:3,
			color:'rgba(51, 51, 51, 0.6)',
			text:'未通过'
		}
	])
	let maxInviteAgentCount = ''
	const contentPopRef = ref()
	const waitAuditCount = ref(0)
	let id = ''
	const pass = async(item) => {
		let result
		if(menuId.value === 1){
			result = await agentBindApplyAudit({
				auditState: 2,
				id: item.id
			})
		}else{
			result = await agentUnBindApplyAudit({
				auditState: 2,
				id: item.id
			})
		}
		if (result) {
			uni.showToast({
				title: '审核成功',
				icon: 'none'
			})
			setTimeout(() => {
				reFresh()
			}, 1000)
		}
	}
	const getActiveCount = () => {
		getActiveLimitApi().then(res => {
			maxInviteAgentCount = res.maxInviteAgentCount
		})
	}
	const refusePop = (item) => {
		id = item.id
		contentPopRef.value.showPop(true)
	}
	const onSubmit = async (data) => {
		uni.showLoading({mask:true})
		let result
		if(menuId.value === 1){
			result = await agentBindApplyAudit({
				auditState: 3,
				id: id,
				refuseReason:data.refuseReason
			})
		}else{
			result = await agentUnBindApplyAudit({
				auditState: 3,
				id: id,
				refuseReason:data.refuseReason
			})
		}
		if (result) {
			reFresh()
		}
		uni.hideLoading()
	}
	// const selMenu = (item) => {
	// 	menuId.value = item.id
	// 	reFresh()
	// }
	let list = ref([])
	const params = ref({
		auditState:'',
		pageNum:1,
		pageSize:10
	})
	let paging = ref()
	const getStatus = (txt,type) => {
		let arr = operMenu.value.filter((it)=> {return it.id==txt})
		if(arr.length && arr[0]){
			return arr[0][type]
		}
		return ''
	}
	const getList = async (num,size) => {
		uni.showLoading()
		params.value.pageNum = num
		let result
		if(menuId.value === 1){
			result = await agentBindApplyPage({
				...params.value
			})
		}else{
			result = await agentUnBindApplyPage({
				...params.value
			})
		}
		if (result) {
			waitAuditCount.value = result.waitAuditCount
			paging.value.complete(result.list)
		}
		uni.hideLoading()
		
	}
	
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const openPer = (item,i) => {
		params.value.auditState = item.id
		reFresh()
	}
	const goBack = () => {
		getOpenerEventChannel.value.emit('reFreshPage','refresh')
		uni.navigateBack()
	}
	
	onLoad(() => {
		getActiveCount()
	})
</script>

<style scoped lang="scss">
.menu-list {
	background-color: #ffffff;
	padding: 10px 0 0 0;
	position: relative;
	z-index: 4;
	.menu-item {
		width: 35%;
		text-align: center;
		position: relative;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 22px;
		height: 30px;
		color: rgba(51, 51, 51, 0.6);

		&.active {
			color: rgba(51, 51, 51, 1);
		}

		.sel-line {
			position: absolute;
			width: 19px;
			height: 4px;
			background: rgba(250, 69, 67, 1);
			border-radius: 4px;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	}
}
.oper-box {
	margin: 10px;
	border-radius: 8px;
	.oper-item {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		line-height: 30px;
		text-align: center;
		color:rgba(51, 51, 51, 0.6);
		position: relative;
		&.active {
			color: rgba(51, 51, 51, 1);
			.active-line{
				width: 19px;
				height: 4px;
				border-radius: 4px;
				background: rgba(250, 69, 67, 1);
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	.detail{
		font-size: 12px;
		color: #333333;
	}
}
.member-tip{
	background: rgba(255,233,183,0.8);
	font-family: PingFang SC;
	font-size: 12px;
	color: #FCB513;
	padding: 8px 16px;
}
.merchant-item{
	margin: 10px;
	padding: 14px;
	background-color: #ffffff;
	border-radius: 12px;
	.img-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.nick-name {
		font-size: 14px;
		font-weight: 400;
	}
	.gray{
		color: rgba(51,51,51,0.6);
	}
	.merchant-name{
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		color: rgba(51, 51, 51, 1);
	}
	.mer-status{
		font-size: 14px;
		font-weight: 600;
		line-height: 22px;
	}
	.mer-logo{
		width: 84px;
		height: 84px;
		border-radius: 8px;
	}
	.mer-inner{
		width: calc(100% - 94px);
		margin-left: 10px;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(51, 51, 51, 1);
	}
	.refuse-Reason{
		font-size: 12px;
		.apply-btn{
			height: 34px;
			padding: 8px 24px;
			border-radius: 4px;
			background: #FA4543;
			color: #ffffff;
			&.cancel{
				background: #F5F5F5;
				color: rgba(51,51,51,0.6);
			}
		}
	}
}
</style>
